<template>
    <div class="upload-banners">
        <div class="item mr-5" v-if="image">
            <!--      <el-image class="img" fit="cover" :src="image" :preview-src-list="[image]">-->
            <!--        <div slot="error" style="width:100%;height:100%;"-->
            <!--             class="image-slot color-999 font12 flex-center">暂无<br/>图片-->
            <!--        </div>-->
            <!--      </el-image>-->
            <video :src="image" class="img" controls></video>
            <span class="el-icon-close del" @click="del"></span>
        </div>
        <div class="item mr-5 flex-center flex-column">
            <span class="el-icon-upload2 font30 mb-5"></span>
            <div class="font12">上传视频</div>
            <input class="file" :name="'blobup_file_banner'+mathRandom" type="file" multiple @change="uploadImage"
                   accept="video/mp4"/>
        </div>
        <div class="item mr-5 flex-column c-pointer" @click="inputDivIsShow=!inputDivIsShow">
            <span class="el-icon-link font30 mb-5"></span>
            <div class="font12">网络地址</div>
            <div class="input-div" v-if="inputDivIsShow" @click.stop="">
                <el-input placeholder="请粘贴视频的访问地址" v-model="image" size="mini" @blur="inputBlur"></el-input>
                <el-button v-preventDbClick size="mini" type="primary" class="mt-10 width-150" @click.stop="inputImage">
                    确定
                </el-button>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import config from '../common/js/config.js';
import request from '../common/js/request.js';
import {tool} from '../common/js/tool.js';

export default {
    props: ['fromData'],
    data() {
        return {
            image: '',
            mathRandom: tool.mathRandom(1111, 9999999),
            inputDivIsShow: false
        }
    },
    created() {
        this.image = this.fromData;
    },
    mounted() {
        // $('body').click(() => {
        //   this.inputDivIsShow = false;
        // })
        let _this = this;
        $(function () {
            $('.right-div').scroll(() => {
                setTimeout(() => {
                    _this.inputDivIsShow = false;
                }, 200)
            });
            $('.right-div').bind('mousewheel', function (event, delta, deltaX, deltaY) {
                setTimeout(() => {
                    _this.inputDivIsShow = false;
                }, 200)
            });
        })
    },
    watch: {
        fromData: {
            handler(val, oldVal) {
                // console.log(111111111111111)
                // console.log(this.fromData)
                // console.log(val)
                // console.log(111111111111111)
                this.image = this.fromData;
            },
            deep: true
        }
    },
    methods: {
        del() {
            this.$confirm('确定要删除吗？', "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.image = '';
                this.$emit('toData', '');
            });
        },
        inputBlur() {
            this.$emit('toData', this.image);
        },
        inputImage() {
            this.inputDivIsShow = false;
            this.$emit('toData', this.image);
        },
        uploadImage() {
            let dom = document.getElementsByName('blobup_file_banner' + this.mathRandom)[0];
            let file = dom.files[0];
            dom.setAttribute('type', 'text');
            setTimeout(() => {
                dom.setAttribute('type', 'file');
            }, 500);
            if (file) {
                let formData = new FormData();
                formData.append('file', file);
                //formData.append('product_id', this.editId);
                request({
                    url: '/user/upload/video',
                    data: formData
                }).then((res) => {
                    console.log(res)
                    this.image = res.data.url;
                    this.$emit('toData', res.data.url);
                })
            }
        },
    }
};
</script>

<style lang="less" rel="stylesheet/less" scoped>

.list {
    .item2 {
        border: 1px solid #ddd;
        margin: 0 10px 10px 0;
    }
}

.upload-banners {
    width: 100%;
    height: 100px;

    .item {
        width: 100px;
        height: 100px;
        border: 1px dashed #DCDFE6;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        float: left;

        .input-div {
            width: 300px;
            height: 100px;
            position: absolute;
            left: 103px;
            background: #eee;
            top: -1px;
            z-index: 99;
            padding: 15px;
            border-radius: 5px;
        }

        .img {
            width: 96px;
            height: 96px;
            border-radius: 5px;
        }

        .del {
            position: absolute;
            right: 5px;
            top: 5px;
            font-size: 20px;
            color: white;
        }

        .span {
            font-size: 30px;
            display: inline-block;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 6;
        }

        .del {
            position: absolute;
            right: 5px;
            top: 5px;
            font-size: 20px;
            color: white;
        }

        .file {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            z-index: 9;
        }
    }
}
</style>
